<template>
  <el-dialog
    class="dialogStyle"
    style="width: 80vw"
    :title="'5-2二部二号组合开关参数'"
    v-model="visible"
  >
    <div class="container">
      <div class="panel">
        <div class="panel-header">
          <h2>5-2二部二号组合开关参数</h2>
          <span class="note"
            ><span class="note-highlight">注:</span>
            以下电流单位为:A，电压单位为:V</span
          >
        </div>

        <div class="table-container">
          <el-row class="header-row">
            <el-col :span="8">设备名称</el-col>
            <el-col :span="4">参数</el-col>
            <el-col :span="8">设备名称</el-col>
            <el-col :span="4">参数</el-col>
          </el-row>
          <el-row>
            <el-col :span="8">二组合开关一号开关A相电流</el-col>
            <el-col :span="4">{{ computedResults("tag1", operator.NO) }} A</el-col>
            <el-col :span="8">二组合开关四号开关C相电流</el-col>
            <el-col :span="4">{{ computedResults("tag2", operator.NO) }} A</el-col>
          </el-row>
          <el-row>
            <el-col :span="8">二组合开关一号开关B相电流</el-col>
            <el-col :span="4">{{ computedResults("tag3", operator.NO) }} A</el-col>
            <el-col :span="8">二组合开关五号开关A相电流</el-col>
            <el-col :span="4">{{ computedResults("tag4", operator.NO) }} A</el-col>
          </el-row>
          <el-row>
            <el-col :span="8">二组合开关一号开关C相电流</el-col>
            <el-col :span="4">{{ computedResults("tag5", operator.NO) }} A</el-col>
            <el-col :span="8">二组合开关五号开关B相电流</el-col>
            <el-col :span="4">{{ computedResults("tag6", operator.NO) }} A</el-col>
          </el-row>
          <el-row>
            <el-col :span="8">二组合开关二号开关A相电流</el-col>
            <el-col :span="4">{{ computedResults("tag7", operator.NO) }} A</el-col>
            <el-col :span="8">二组合开关五号开关C相电流</el-col>
            <el-col :span="4">{{ computedResults("tag8", operator.NO) }} A</el-col>
          </el-row>
          <el-row>
            <el-col :span="8">二组合开关二号开关B相电流</el-col>
            <el-col :span="4">{{ computedResults("tag9", operator.NO) }} A</el-col>
            <el-col :span="8">二组合开关六号开关A相电流</el-col>
            <el-col :span="4">{{ computedResults("tag10", operator.NO) }} A</el-col>
          </el-row>
          <el-row>
            <el-col :span="8">二组合开关二号开关C相电流</el-col>
            <el-col :span="4">{{ computedResults("tag11", operator.NO) }} A</el-col>
            <el-col :span="8">二组合开关六号开关B相电流</el-col>
            <el-col :span="4">{{ computedResults("tag12", operator.NO) }} A</el-col>
          </el-row>
          <el-row>
            <el-col :span="8">二组合开关三号开关A相电流</el-col>
            <el-col :span="4">{{ computedResults("tag13", operator.NO) }} A</el-col>
            <el-col :span="8">二组合开关六号开关C相电流</el-col>
            <el-col :span="4">{{ computedResults("tag14", operator.NO) }} A</el-col>
          </el-row>
          <el-row>
            <el-col :span="8">二组合开关三号开关B相电流</el-col>
            <el-col :span="4">{{ computedResults("tag15", operator.NO) }} A</el-col>
            <el-col :span="8">二组合开关总线保护开关A相电流</el-col>
            <el-col :span="4">{{ computedResults("tag16", operator.NO) }} A</el-col>
          </el-row>
          <el-row>
            <el-col :span="8">二组合开关三号开关C相电流</el-col>
            <el-col :span="4">{{ computedResults("tag17", operator.NO) }} A</el-col>
            <el-col :span="8">二组合开关总线保护开关B相电流</el-col>
            <el-col :span="4">{{ computedResults("tag18", operator.NO) }} A</el-col>
          </el-row>
          <el-row>
            <el-col :span="8">二组合开关四号开关A相电流</el-col>
            <el-col :span="4">{{ computedResults("tag19", operator.NO) }} A</el-col>
            <el-col :span="8">二组合开关总线保护开关C相电流</el-col>
            <el-col :span="4">{{ computedResults("tag20", operator.NO) }} A</el-col>
          </el-row>
          <el-row>
            <el-col :span="8">二组合开关四号开关B相电流</el-col>
            <el-col :span="4">{{ computedResults("tag21", operator.NO) }} A</el-col>
            <el-col :span="8">二组合开关总线电压</el-col>
            <el-col :span="4">{{ computedResults("tag22", operator.NO) }} V</el-col>
          </el-row>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { act } from "@/utils/websocket";
import { operator } from "@/utils/op_enums";
import { useTagResults } from "@/utils/useTagResults";

const computedResults = (
  key: string,
  op: operator,
  op_number?: number,
  retain?: number
) =>
  computed(() => {
    return useTagResults(act.PD_52_1.PD_52[key], op, op_number, retain);
  });

// 定义变量内容
const visible = ref(false);

// 打开弹窗
const openDialog = () => {
  visible.value = true;
};

// 暴露变量
defineExpose({
  openDialog,
});
</script>

<style scoped lang="scss">
.dialogStyle {
  .container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .panel {
    display: flex;
    flex-direction: column;
    background-color: var(--el-bg-color);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: var(--el-color-primary-light-9);
    border-bottom: 1px solid var(--el-border-color-light);

    h2 {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
      color: var(--el-text-color-primary);
    }

    .note {
      font-size: 14px;
      color: var(--el-text-color-regular);

      .note-highlight {
        color: var(--el-color-danger);
        font-weight: 500;
      }
    }
  }

  .table-container {
    overflow-x: auto;
    border: 1px solid var(--el-border-color-light);
  }

  .header-row {
    .el-col {
      background-color: var(--el-fill-color) !important;
      font-weight: 500;
      color: var(--el-text-color-primary);
      padding: 8px 5px;
      text-align: center;
      font-size: 13px;
    }
  }

  .el-row {
    .el-col {
      border: 1px solid var(--el-border-color-lighter);
      padding: 8px 5px;
      text-align: center;
      font-size: 12px;
      color: var(--el-text-color-regular);
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:first-child ,
      &:nth-child(3){
        font-weight: 500;
        color: var(--el-text-color-primary);
        background-color: var(--el-fill-color-lighter);
      }
    }
  }
}
</style>